<template>
  <div class='m-results_staff'>
    <el-form :inline='true'>
      <el-form-item label='销售人员：'>
        <el-select class='form-content' v-model='search.sell'>
          <el-option
            v-for="(opt) in sellerList"
            :key="opt.staff_id"
            :value="opt.staff_id"
            :label="opt.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='选择月份：'>
        <el-date-picker
          v-model="search.month"
          type="month"
          value-format="timestamp"
          placeholder="选择月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click='searchFun'>搜索</el-button>
      </el-form-item>
    </el-form>
    <a-table :data='data' :cols='tableKeys'>
    </a-table>
    <!-- <div style='padding-top: 20px;font-size: 16px;'>
      <span>总业绩：</span>
      <strong>{{ count }}</strong>
    </div> -->
    <div class='u-pagination' style='opacity: 0;'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>
  </div>
</template>

<script>
import selectList from '@/module/customer/u-selectList'
import { mapMutations } from 'vuex'

export default {
  name: 'm-results_staff',

  components: {
    selectList
  },

  data() {
    const options = [
      { label: '微信', value: '1' },
      { label: '支付宝', value: '2' },
      { label: '公司公账', value: '4' },
      { label: '公司私账', value: '5' }
    ]
    const filterType = value => {
      return options.filter(v => value === v.value)[0].label
    }
    return {
      tableKeys: [
        { prop: 'pay_time', label: '收款日期', minWidth: '100' },
        { prop: 'buyer_name', label: '客户姓名', minWidth: '100' },
        { prop: 'payment', label: '收费（元）', minWidth: '100' },
        { prop: 'pay_type', label: '入账形式', minWidth: '100', filter: filterType },
        { prop: 'goods_name', label: '课程名称', minWidth: '100' }
      ],
      search: {
        sell: '',
        month: new Date().getTime()
      },
      data: [],
      count: 0,
      sellerList: [],
      ifRequesting: false
    }
  },

  mounted() {
    this.getStaffs()
    // this.$refs.page.changePage()
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    async fetchData(aPageNum, aPageSize) {
      const time = new Date(this.search.month)
      const params = {
        aFirmId: this.aFirmId,
        aPageNum,
        aPageSize
      }
      if (this.search.month) params.aMonth = time.getMonth() + 1
      if (this.search.month) params.aYear = time.getFullYear()
      if (this.search.sell) {
        params.aStaffId = this.search.sell
      } else {
        return this.__notify('提示', '请选择销售人员', 'info')
      }
      return this.$api.linkGetStaffKpDetail(params)
    },

    getData(data) {
      this.data = data
    },

    async getStaffs() {
      const { code, data } = await this.$api.firmGetStaffs({
        aFirmId: this.aFirmId
      })
      if (code === 0) {
        this.sellerList = data.list
      }
    },

    searchFun() {
      this.$refs.page.changePage()
    }
  }
}
</script>

<style lang='less'>
.m-results_staff {
  .u-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>